<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.3"></script>

    <link rel="stylesheet" href="/admin/js-css/css/main.css?v=1.1">
    <link rel="icon" href="/admin/js-css/img/logo.png">

    <style>
        .el-card__body, .el-main {
            padding: 2px 10px;
        }

        /*原来的背景颜色#dfefff*/
        body{
            background: #f5f7fa;
        }
        .el-submenu{
            font-weight: normal;
        }

        .messageIndex {
            z-index: 29891014 !important; // 设置的值一定要比2007大，因为dialog的层级是2007
        }



        /**右下角弹窗样式**/
        .notifyList {
            padding: 10px;
            font-size: 14px;
            height: 210px;
            overflow: auto;
            width: 320px;
            font-weight: normal;
        }

        .el-notification__title {
            font-weight: normal;
        }
        .el-notification__content {
            text-align: left;
        }
    </style>
</head>

<body>
<div id="app">
    <title>{{systemTitle}}</title>
    <el-container>
        <el-aside width="auto">
            <el-menu :default-active="clickMenuId" ref="menu" :collapse="isCollapse" class="el-menu-vertical-demo" @open="handleOpen"
                     @close="handleClose" background-color="#304156" text-color="#C0D2DC" active-text-color="#409eff">
                <!-- 菜单头部LOGO -->
                <h4>
                    <img class="logoImg" :src="logo" v-if="systemTitle.length<=10" />
                    <span v-if="!isCollapse" style="font-weight: 700;font-size: 12px;">{{systemTitle}}</span>
                </h4>
                <el-submenu :index="item.id" v-for="(item,index) in menus" >
                    <template slot="title">
                        <i :class="item.icon_path"></i>
                        <span>{{item.name}}</span>
                    </template>

                    <el-menu-item :index="itemsub.id" v-for="(itemsub,index1) in item.childs" @click="openlink(item,itemsub)" style="padding-left: 14px;">
                        <i :class="itemsub.icon_path"></i>
                        <span>{{itemsub.name}}</span>
                    </el-menu-item>

                </el-submenu>
            </el-menu>

        </el-aside>
        <el-container>
            <el-header>
                <header>
                    <!-- 左侧标题及横向菜单 -->
                    <div class="l-content">
                        <div class="open-menu-btn" @click="handleMenu">
                            <i v-if="isCollapse" class="el-icon-s-unfold"></i>
                            <i v-else class="el-icon-s-fold"></i>
                        </div>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/admin/html/main.html' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadcrumb.one!=''">{{breadcrumb.one}}</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadcrumb.two!=''">{{breadcrumb.two}}</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="breadcrumb.three!=''">{{breadcrumb.three}}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                    <!-- 右侧头像部分 -->
                    <div class="r-content">
                        <el-dropdown trigger="click" size="small">
                            <div style="display: flex;">
                                    <span>
                                        <img src="/admin/js-css/img/skin_/userface.png" class="user" />
                                    </span>
                                <span style="line-height: 40px;margin-left: 10px;cursor:pointer;" >
                                        {{user.user_name}}
                                    </span>
                            </div>
                            <el-dropdown-menu slot="dropdown"  >
                                <el-dropdown-item onclick="f_pass()">修改密码</el-dropdown-item>
                                <el-dropdown-item onclick="logout()">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </header>
            </el-header>

            <!-- tag标签 -->
            <div class="tags">
                <el-tag size="small" :type="item.type" v-for="(item, index) in tagList" :key="item.name"
                        :closable="item.name !== 'home'" :effect="currentTag === index? 'dark':'plain'"
                        @click="changeTag(item,index)" @close="handleCloseTag(item,index)">
                    {{item.label}}
                </el-tag>
            </div>

            <!-- 主要内容区域 -->
            <el-main>
                <template v-for="(item,index) in iframeList">
                    <iframe :src="item.url"  frameborder="0" :id="item.id" ></iframe>
                </template>
            </el-main>
        </el-container>
    </el-container>



</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                systemTitle:"总后台管理平台",
                logo:"/admin/js-css/img/skin_/loginlogo.png",
                visible: false,
                isCollapse: false,
                activeIndex: '1',
                breadcrumb:{one:"欢迎进入",two:"",three:""},
                menus:[],
                user:{},
                tagList: [
                    {
                        id:"home",
                        name: "home",
                        label: "首页",
                        type: 'primary',
                        item:{name:"首页"},
                        itemsub:{name:"",id:"home",list_url:"/admin/html/welcome_not.html"}
                    }
                ],
                iframeList:[],//操作区集合URL
                currentTag: 0,
                mineurl:"/admin/html/welcome_not.html",
                clickMenuId:"",
                notifyHtml:"",
                notifyObj:{},
                notifyIsShow:false,
            }
        },
        created(){
            this.getLeftMenus();
            this.user = JSON.parse(localStorage.getItem("user"));
            if(this.user.org_name != ""){
                this.systemTitle = this.user.org_name;
            }
            if(this.user.atth_path != ""){
                this.logo = this.user.atth_path;
            }
            this.getWelcom();
            this.isLogin();
            this.openNotify();


            window.setInterval(async function (){
                const res1 = await postBody("/admin/api/DataManagementController/notifyMessage",{});
                if(res1.code == 1){
                    vm.notifyHtml = res1.data;
                    $(".el-notification__content").html("<p>"+vm.notifyHtml+"</p>");
                    if(!vm.notifyIsShow){
                        try {
                            vm.notifyObj.close();
                        }catch (e){}
                        vm.openNotify();
                    }
                }
                if(vm.notifyHtml == ""){
                    if(vm.notifyIsShow){
                        try {
                            vm.notifyObj.close();
                        }catch (e){}
                        vm.notifyIsShow = false;
                    }
                }
            },2000);
        },
        methods: {
            //打开右下角弹窗
            async openNotify(){
                const res1 = await postBody("/admin/api/DataManagementController/notifyMessage",{});
                if(res1.code == 1 && res1.data != ""){
                    this.notifyHtml = res1.data;
                    this.notifyObj = this.$notify({
                        title: '待办事项',
                        dangerouslyUseHTMLString: true,
                        position: 'bottom-right',
                        duration:0,
                        message: this.notifyHtml,
                        customClass:'notifyList'
                    });
                    this.notifyIsShow = true;
                }

            },

            //查询左侧菜单
            async getLeftMenus(){
                const res = await post("/admin/api/DataManagementController/getMenus",{});
                if(res.code == 0){
                    window.location.href = "login.html"
                }
                this.menus = res.data;
                //默认打开一级菜单
                this.$nextTick(function (){
                    if(vm.menus.length>0){
                        vm.$refs.menu.open(vm.menus[0].id);
                    }

                });

            },
            async isLogin(){
                const res = await post("/admin/api/UserController/isLogin",{});
                if(res.code == 1){
                    this.isLogin();
                    return;
                }
                layer.confirm('当前帐号在另外一台设备登录或登录失效，导致当前帐户退出，是否需要重新登录？', {
                    btn: ['确定', '取消'] //可以无限个按钮
                }, function (index, layero) {
                    window.location.href = "login.html";
                }, function (index) {
                    //按钮【按钮二】的回调
                });
            },
            //获取主页面数据
            async getWelcom(){
                const res1 = await postBody("/admin/api/DataManagementController/isWelcompage",{});
                if(res1.code == 1){
                    this.mineurl = "/admin/html/welcome.html";
                    this.tagList[0].itemsub.list_url = this.mineurl;
                }
            },
            getBreadcrumb(){
                return this.breadcrumb;
            },
            setBreadcrumb(item){
                this.breadcrumb = item;
            },
            openlink(item,itemsub){
                this.breadcrumb.one = item.name;
                this.breadcrumb.two = itemsub.name;
                this.breadcrumb.three = "";
                this.clickMenuId = itemsub.id;
                let isadd = true;
                for(let a=0;a<this.tagList.length;a++){
                    if(this.tagList[a].name == itemsub.id){
                        this.currentTag = a;
                        isadd = false;
                    }
                }

                top.data.param = {ids:""};
                //alert(treeNode.id + ", " + treeNode.name+ ", "+treeNode.code);
                top.data.zygl_id = itemsub.id;
                top.data.tableId = itemsub.id;
                top.data.orderCol = itemsub.order_col;
                top.data.inputurl = itemsub.url;
                top.data.treeObj = itemsub;
                top.data.treeNodeObj = {tableId:itemsub.id,id:itemsub.id,type:"0",inputurl:itemsub.url,orderCol:itemsub.order_col};
                let openurl = "/admin/html/dataManagement/list.html?v="+guid();
                if(itemsub.list_url != ""){
                    if(itemsub.list_url.indexOf("?")!=-1){
                        openurl = itemsub.list_url+"&v="+guid();
                    }else {
                        openurl = itemsub.list_url+"?v="+guid();
                    }

                }
                //打开链接
                if(!itemsub.isbingding){
                    this.mineurl = openurl;
                }else {
                    this.mineurl = "/admin/html/content.html?v="+guid();
                }
                let isaddmenus = true;
                for(let i=0;i<this.iframeList.length;i++){
                    let submenus = this.iframeList[i];
                    $("#"+submenus.id).hide();
                    if(submenus.id == itemsub.id){
                        isaddmenus = false;
                        let ifurl = $("#"+submenus.id).attr("src");
                        if(ifurl == ""){
                            $("#"+submenus.id).attr("src",this.mineurl);
                            submenus.url = this.mineurl;
                        }
                        $("#"+submenus.id).show();
                    }
                }
                if(isaddmenus){
                    this.iframeList.push({url:this.mineurl,id:itemsub.id,style:"display: '';"});
                }

                //添加tag标签
                let tag = {
                    name: itemsub.id,
                    label: itemsub.name,
                    type: 'primary',
                    url:openurl,
                    itemsub:itemsub,
                    item:item
                };
                if(isadd){
                    this.tagList.push(tag)
                    this.currentTag = this.tagList.length-1;
                }
            },

            // 监听左侧菜单
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 控制左侧菜单开合
            handleMenu() {
                this.isCollapse = !this.isCollapse;
            },
            // 监听顶部菜单
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            // 点击触发
            changeTag(item,index) {
                this.currentTag = index;
                this.openlink(item.item,item.itemsub);
            },
            // 关闭时触发
            handleCloseTag(item,index) {
                for(let i=0;i<this.iframeList.length;i++){
                    let submenus = this.iframeList[i];
                    if(submenus.id == item.name){
                        $("#"+submenus.id).attr("src","");
                    }
                }
                this.tagList.splice(index,1);
                if(index == this.currentTag){
                    this.currentTag = index-1;
                    this.openlink(this.tagList[this.currentTag].item,this.tagList[this.currentTag].itemsub);
                }
                if(this.currentTag>=this.tagList.length){
                    this.currentTag = this.tagList.length-1;
                }


            }
        }
    })



    function logout(){
        post("/admin/api/UserController/logout",{},function (res) {
            window.location.href = "/admin/html/login.html";
        })

    }

    function f_pass(){
        f_layer_open_get("/admin/html/pass/input.html","40%","40%",null,null,"修改密码",null);
    }


    function f_layer_open(url, width, height, closeFun, buttons, title, parms) {
        if(width == ""){
            width = "60%";
        }
        if(height == ""){
            height = "90%";
        }
        var layer_id = "" + new Date().getTime();
        var config = {
            id: layer_id,
            type: 2,
            title: title,
            area: [width, height],
            fixed: false, //不固定
            maxmin: true,
            content: "about:blank",
            end: function () {
                if (closeFun) {
                    closeFun();
                }
            }, cancel: function () {
                var index = layer.getFrameIndex(layer_id); //先得到当前iframe层的索引
                layer.close(index);
                return true;
            }
        };
        if (buttons) {
            copy(buttons, config);
        }

        //iframe层-父子操作
        layer.open(config);
        f_post_submit(layer_id, parms, url);


    }


    function f_post_submit(layer_id, parms, url) {
        var win = getTopIframe($("#" + layer_id));
        $("#form_submit").attr("target", win.name);
        $("#form_submit").attr("action", url);
        var hidden = "";
        for (var k in parms) {
            hidden = hidden + "<input type=\"hidden\" name=\"" + k + "\" value=\"" + parms[k] + "\" />";
        }
        hidden = hidden + "<input type=\"hidden\" name=\"layer_id\" value=\"" + layer_id + "\" />";
        $("#form_submit").html(hidden);
        $("#form_submit").submit();
    }


    function f_layer_open_get(url, width, height, closeFun, buttons, title, formData) {
        if(width == ""){
            width = "60%";
        }
        if(height == ""){
            height = "90%";
        }
        var layer_id = "" + new Date().getTime();
        var config = {
            id: layer_id,
            type: 2,
            offset: '25px',
            title: title,
            area: [width, height],
            fixed: false, //不固定
            maxmin: true,
            content: url,
            success: function (layero, index) {
                if (formData) {
                    try {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        iframeWin.setData(formData);
                    }catch (e){}

                }
            },
            end: function () {
                if (closeFun) {
                    closeFun();
                }
            }, cancel: function () {
                var index = layer.getFrameIndex(layer_id); //先得到当前iframe层的索引
                layer.close(index);
                return true;
            }
        };
        if (buttons) {
            copy(buttons, config);
        }

        //iframe层-父子操作
        layer.open(config);

    }

    async function callLocal(index, layero,tvs){
        //按钮【按钮一】的回调
        let win = getTopIframe(layero);
        let data = win.getData();
        let i = load();
        let res = await postWebCustom(getTableId(tvs[1]),data);
        layer.close(i);
        if(res.code == 1){
            const res1 = await postBody("/admin/api/DataManagementController/notifyMessage",{});
            if(res1.code == 1 && res1.data != "") {
                vm.notifyHtml = res1.data;
                $(".el-notification__content").html("<p>"+vm.notifyHtml+"</p>");
            }else if(vm.notifyHtml == ""){
                vm.notifyObj.close();
            }
            top.layer.closeAll();
        }else {
            alert(res.msg);
            return false;
        }
        alert(res.msg);
    }

    async function postCallLocal(index, layero,tvs){
        if(tvs.length == 3){//打开弹窗
            let btn = {
                btn: ['确定', '取消']
                , yes: function (index, layero) {
                    callLocal(index,layero,tvs);
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            };

            top.f_layer_open_get(tvs[2], "70%", "85%", function () {

            }, btn, "待办事项数据处理");
        }else if(tvs.length == 2){
            callLocal(index,layero,tvs);
        }else {
            layer.closeAll();
        }

    }


    /**右下角弹窗点击事件**/
    function notifyClickOpenurl(url,buttons){
        let btn = {};
        if(buttons){
            btn.btn = [];
            let btnname = buttons.split(",");
            for(let a=0;a<btnname.length;a++){
                let tvs = btnname[a].split("@");
                btn.btn.push(tvs[0]);
                if(a == 0){
                    btn["yes"] = function (index, layero) {
                        //按钮【按钮一】的回调
                        postCallLocal(index,layero,tvs);
                        return false;
                    }
                }else {
                    let b = a+1;
                    btn["btn"+b] = function (index, layero) {
                        postCallLocal(index,layero,tvs);
                        return false;
                    }
                }
            }
        }

        top.data.other = {};
        top.f_layer_open_get(url, "90%", "90%", function () {

        }, btn, "待办事项处理");
    }


    function close(i){
        if(i!=undefined && i!=null){
            layer.close(i);
        }else {
            layer.closeAll();
        }
    }
    function alert(msg) {
        vm.$message({
            type: 'success',
            message: msg,
            customClass: 'messageIndex'
        });
    }

    function error(msg) {
        vm.$message.error(msg);
    }

    var data = {

    };
</script>

</html>